<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background: red;
				position: absolute;
				top: 0px;
				left: 0px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
//				抓取元素
				var box = document.getElementById('box');
//				获得可视区域的宽度
				var w = document.documentElement.clientWidth;
//				获得可视区域高度
				var h = document.documentElement.clientHeight;
//				获得当前元素的宽度
				var Tw = box.offsetWidth;
//				获得可视区域高度
				var Th = box.offsetHeight;
//				添加鼠标按下事件
				box.onmousedown = function(e){
//					获取事件对象
					var e = window.event||e;
//					获取当前元素的left值
					var l = box.offsetLeft;
//					获取当前元素的top值
					var t = box.offsetTop;
//					获取鼠标相对与浏览器的X轴位置
					var startX = e.clientX;
//					获取鼠标相对与浏览器的Y轴位置
					var startY = e.clientY;
//					给文档添加鼠标移动事件
					document.onmousemove = function(e){
//						获取事件对象
						var e = window.event||e;
//						获得鼠标相对问当X轴位置
						var endX = e.clientX;
//						获得鼠标相对问当Y轴位置
						var endY = e.clientY;
//						计算鼠标移动的距离
						var moveX = endX-startX;
						var moveY = endY-startY;
//						计算元素新的top值和left值
						var newT = moveY+t ;
						var newL = moveX+l;
						
						if(newT<=0){
							newT=0;
						}
						if(newL<=0){
							newL=0;
						}
						if(newL>=w-Tw){
							newL = w-Tw;
						}
						if(newT>=h-Th){
							newT = h-Th;
						}
						
						
						
//						将计算过后的Top值和left值赋值回去
						box.style.top = newT+'px';
						box.style.left = newL+'px';
						
						
					}
					
				}
				
//				添加鼠标抬起事件
				window.onmouseup = function(){
					document.onmousemove = null;
				}
			
				
			}
			
		</script>
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
</html>
